<script setup>
import '@/assets/font/homeAll/iconfont.css';

import {
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  isRef,
  onMounted,
  watchEffect,
  getCurrentInstance,
} from "vue";
//从vuex中引入useStore
import {useStore} from "vuex";
import {ElMessage} from "element-plus";

import { useRouter,useRoute } from 'vue-router';
import store from "../store";
const router = useRouter();
const route = useRoute();

const { proxy } = getCurrentInstance();
let data = reactive({
  search:'',
  searchAdd:'',
  searchFlag:''
})

const hot = ref(['配件','IE900','游戏','大馒头','新品','MOMENTUM','GSP600','真无线二代']);

let newNav = ref([]);
// 获取classify组件传来的classify_id
const props = defineProps({
  classify_id: [Number,Array]
})
const { classify_id } = toRefs(props)

watch(classify_id,(newV,oldV)=>{
  for (let i=0;i<newNav.value.length;i++){
      newNav.value[i].active=0;
  }
  if (!isNaN(newV)){
    // console.log(newV)
    for (let i=0;i<newNav.value.length;i++){
      if (newNav.value[i].classify_id==newV){
        newNav.value[i].active=1;
      }
    }
  }
})

// 用户昵称
let nickname = ref('');
let nick = computed(() => store.state.nickname);
// 监听vuex nickname的随时变化
watch(nick,(newV,oldV)=>{
  // console.log(newV,oldV);
  if (newV.length>2){
    nickname.value = newV.substr(0,2)+'**';
  }else {
    nickname.value = newV;
  }
})
// 请求页面数据
onMounted(()=>{
  // console.log(store.state.nickname);
  proxy.$get("/api/data/index").then((data)=>{
    let { nav,nickName } = data;
    // 实时更新昵称
    if (nickName){
      if (nickName.nickname.length>2){
        store.commit('preservation',nickName.nickname.substr(0,2)+'**');
      }else {
        store.commit('preservation',nickName.nickname);
      }
      nickname.value = store.state.nickname;
    }
    newNav.value = nav;
    for (let i=0;i<newNav.value.length;i++){
      if (newNav.value[i].classify_id==route.query.classify_id){
        newNav.value[i].active=1;
      }
    }
  })
})

let handle = (list,i)=>{
  let arr=[...list]
  for (let a=0;a<arr.length;a++){
    arr[a].active=0;
  }
  arr[i-1].active=1;
  return arr;
}

// 登录状态
let isLogin = ref();
let token = localStorage.getItem('token');

isLogin.value = !token;

// 退出登录发送请求
let logout = ()=>{
  proxy.$post("/api/users/logout",{token}).then((data)=>{
    // 提示
    ElMessage({
      message: data,
      type: 'success',
    })
  })
  isLogin.value = true;
  localStorage.clear();
  sessionStorage.clear();
  router.push('/');
}

// 搜索搜索弹出框
let flag = ref(false);

//显示
let show = ()=>{
  flag.value = true;
  // data.searchFlag = true;
}
//隐藏搜索弹出框
let hide = ()=>{
  flag.value = false;
  // data.searchFlag = false;
}

let sum=ref(0);
let searchGet = ()=>{
  proxy.$get('/api/header/search',{search:data.search})
      .then((date)=>{
        if (date.length === 0){
          date = sum.value;
        }
        store.commit('search',date);
        // store.commit('searchFlag',date);
        data.search = '';
        hide();
      })
}
//点击搜索
let placeholderHeader=ref("IE 100 PRO");
let searchNav = (index)=>{
  data.search=hot.value[index];
  searchGet();
}
//
let search = ()=>{
  sum.value++;
  searchGet();
  router.push("/classify")
}

</script>

<template>
  <!-- 头部导航（公共） -->
  <header>
    <div class="header-box">
      <div class="layout flex-bet">
        <div class="layout-flex flex1">
          <a href="/" class="logo">
            <img src="/images/logo.jpg" alt="logo" class="el-image__inner">
          </a>
          <ul class="nav">
            <li v-for="(val,index) in newNav" @click="newNav=handle(newNav,val.nav_id);"  :key="val.nav_id" class="nav-item">
              <router-link :class="val.active==1?'active':''"  :to="{path:`${val.path}`,query:{classify_id:val.classify_id}}">{{ val.title }}</router-link>
            </li>
          </ul>
        </div>
        <div class="layout-flex">
          <div class="head-search" @click="show">
            <input style="cursor: text;" type="text" class="el-input" placeholder="新品上市" disabled="disabled">
            <i class="iconfont icon-sousuo"></i>
          </div>
          <div class="head-user">
            <div class="user item">
              <el-popover
                  placement="bottom"
                  :width="162"
                  trigger="hover"
                  popper-class="head-popover"
                  :offset=30
              >
                <div v-if="isLogin" class="head-login">
                  <div class="border-px">
                    <p>已是会员</p>
                    <a href="#/login?type=login" class="login el-button--primary">登录</a>
                  </div>
                  <div class="registered">
                    <p>注册会员享受更多权益</p>
                    <router-link to="/login?type=register">
                      <button type="button" class="el-button el-button--default"><span>注册</span></button>
                    </router-link>
                  </div>
                </div>
                <div v-else class="head-logged-in">
                  <p class="text">
                    <i class="iconfont icon-203yonghu_yonghu4
"></i>
                    欢迎您 {{ nickname }}
                  </p>
                  <a href="#/personalCenter" class="personalCenter">个人中心</a>
                  <a href="#/personalCenter/myOrder" class="myOrder">我的订单</a>
                  <button class="el-button" @click="logout">
                    <span>退出登录</span>
                  </button>
                </div>
                <template #reference>
                  <a href="javascript:;">
                    <i class="iconfont icon-203yonghu_yonghu4
"></i>
                  </a>
                </template>
              </el-popover>
            </div>
            <div class="cart item">
              <a href="#/cart">
                <i class="iconfont icon-gouwuche"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--搜索-->
    <transition name="amt">
      <div class="search" v-show="flag" @mouseleave="hide">
        <div class="sen-container search-head layout-flex">
          <a href="/" class="logo">
            <img src="/images/logo.jpg" alt="logo" class="el-image__inner">
          </a>
          <div class="search-box">
            <input type="text" id="search" v-focus v-model.trim="data.search" class="el-input" @keydown.enter="search" placeholder="IE 100 PRO">
            <router-link @click="search" to="/classify">
              <i class="iconfont icon-sousuo"></i>
            </router-link>
          </div>
          <div class="search-close" @click="hide">
            <i class="iconfont icon-guanbi_o"></i>
          </div>
        </div>
        <div class="sen-container search-content">
          <div class="fs">
            <p class="search-p">大家都在搜</p>
            <ul class="search-hot">
              <li v-for="(val,index) in hot" :key="index">
                <router-link @click="searchNav(index)" to="/classify">
                  <p>{{ val }}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </header>
</template>

<style lang="less" scoped>
.active {
  color: #09c !important;
  padding-bottom: 5px;
  border-bottom: 2px solid #09c;
}
.header-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  box-shadow: 0 2px 7px 0 hsla(0,0%,80%,.45);
  opacity: .8;
  .layout {
    width: 1200px;
    height: 80px;
    margin: 0 auto;
    .logo {
      display: block;
      width: 164px;
      //height: 38px;
    }
    .nav {
      display: flex;
      justify-content: center;
      flex: 1;
      .nav-item {
        color: #000;
        font-size: 14px;
        font-weight: 400;
        &:not(:first-child){
          margin-left: 40px;
        }
        a {
          color: #000;
        }
        a:hover {
          color: #09c;
        }
      }
    }
    .head-search {
      width: 180px;
      height: 30px;
      padding: 0 14px 0 0;
      background: #e5e5e5;
      border-radius: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      .el-input {
        border: none;
        outline: none;
        height: 30px;
        background: #e5e5e5;
        padding: 0 9px;
        border-radius: 15px;
      }
    }
    .head-user {
      display: flex;
      align-items: center;
      .cart {
        margin-left: 32px;
      }
      .item .iconfont {
        color: #333;
        font-size: 18px;
      }
    }
  }
}
.flex-bet {
  justify-content: space-between;
}
.flex-bet,.layout-flex {
  display: flex;
  align-items: center;
}
.flex1 {
  flex: 1;
}
img {
  display: block;
}
a:hover {
  text-decoration: none !important;
}
.el-popper {
  box-sizing: border-box;
  .head-login {
    text-align: center;
    padding: 16px 18px;
    .border-px {
      padding-bottom: 20px;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        left: 0;
        width: 200%;
        transform: scale(.5);
        transform-origin: left top;
        z-index: 100;
        bottom: 0;
        border-bottom: 2px solid #e0e0e0;
      }
    }
    .login {
      display: block;
      height: 26px;
      background: #0096d6;
      width: 126px;
      line-height: 26px;
      margin-top: 13px;
      border-radius: 4px;
      color: #fff;
    }
    p {
      font-size: 12px;
      line-height: 1;
    }
    .registered {
      margin-top: 20px;
      p {
        font-size: 12px;
        margin-bottom: 13px;
        line-height: 1;
      }
    }
    .el-button {
      width: 100%;
      padding: 7px 0;
    }
  }
  .head-logged-in {
    padding: 15px 18px 14px;
    text-align: center;
    line-height: 1;
    color: #333;
    .text {
      margin-bottom: 26px;
      .iconfont {
        font-size: 15px;
      }
    }
    a {
      display: block;
    }
    .personalCenter {
      margin-bottom: 18px;
    }
    .myOrder {
      padding-bottom: 21px;
      margin-bottom: 14px;
      border-bottom: 1px solid #e0e0e0;
    }
    .el-button {
      width: 126px;
      height: 28px;
      line-height: 1;
      padding: 0;
      border: 1px solid #000;
      font-size: 12px;
    }
  }
}
.sen-container {
  width: 1200px;
  margin: 0 auto;
}
.search {
  background: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 7px 0 hsla(0, 0%, 80%, 0.45);
  .search-head {
    height: 80px;
    .logo {
      width: 191px;
      //height: 46px;
    }
  }
  .search-content {
    box-sizing: border-box;
    padding-left: 342px;
    padding-bottom: 14px;
    .search-p {
      color: #999;
      margin-bottom: 18px;
    }
    .search-hot {
      max-height: 380px;
      overflow-y: auto;
      margin-left: 2px;
      li {
        margin-bottom: 14px;
        cursor: pointer;
        a {
          color: #000;
          &:hover {
            color: #09c;
          }
        }
      }
    }
  }
  .search-box {
    display: flex;
    border-bottom: 1px solid #f0f2f5;
    align-items: center;
    margin: 0 200px 0 148px;
    .el-input {
      border: none;
      outline: none;
      width: 604px;
      height: 40px;
      padding: 0 2px;
      color: #999;
      font-size: 14px;
    }
    .iconfont {
      cursor: pointer;
      font-weight: 600;
    }
  }
  .search-close .iconfont {
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
  }
}
.amt-enter-active, .amt-leave-active {
  transition: all 1s;
}
.amt-enter-from, .amt-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.amt-enter-to, .amt-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>
